<template>
	<view style="flex:1">
		<picker @change="selectChange" :value="index" :range="array"  :disabled="disabled">
			<view :class="array[index] ? 'uni-input' : 'uni-input-gray'" class="flex-start">
				<view v-if="haveLeft"  class="size-14">{{array[index]?array[index]:'请选择'}}</view>
				<view v-if="!haveLeft" :class="isleft=='0'?'text-right':isleft=='1'?'text-left':'text-center'" class="size-14 flex-1" style="line-height:40rpx">{{array[index]?array[index]:'请选择'}}</view>
				<!-- <input v-if="!haveLeft" class="size-14 base-color" :class="isleft=='0'?'text-right':isleft=='1'?'text-left':'text-center'" v-input-fb v-push-up v-model="array[index]" placeholder="请选择" auto-height  style="width:100%;" /> -->
				<image v-if="!disabled" class="icon-right" src="../../static/img/selectIcon.png" mode=""></image>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:{
			value:{
				type:String,
				default() {
					return ''
				}
			},
			selectList:{
				type:Array,
				default() {
					return []
				}
			},
			disabled:{
				type:Boolean,
				default:false
			},
			haveLeft:{
				type:Boolean,
				default:false
			},
			isleft:{
				type:String,
				default:'0'
			}
		},
		methods:{
			selectChange(e){
				// console.log(e.target)
				if(e.target.value<0){
					e.target.value = 0;
				}
				 this.$emit('input', this.selectList[e.target.value].value);
				 this.$emit('change', e);
			}
		},
		computed:{
			array() {
				return this.selectList.map(item => item.name);
			},
			index() {
				try{
					var result = this.selectList.findIndex(item =>item.value == this.value)
					return result;
				}catch{
					return 0;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-input {
		font-size: 26rpx;
	}
	.uni-input-gray{
		color: grey;
		font-size: 26rpx;
	}
	.flex-start{
		align-items: center;
		position: relative;
		overflow: hidden;
	}
	.icon-right{
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}
</style>
